<template>
    <div>
        <el-card>
            <el-form :inline="true" :model="query" class="query-form" size="small">
                <el-form-item class="query-form-item">
                    <el-input v-model="query.attributesname" placeholder="请输入商品属性模板名称" prefix-icon="el-icon-search"
                              clearable></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="el-icon-search" @click="onSearch">查询</el-button>
                    <el-button type="primary" @click.native="goback">返回</el-button>
                </el-form-item>
            </el-form>
            <el-table ref="multipleTable" v-loading="listLoading" :data="list"
                      :header-cell-style="{ background: '#F4F4F5', color: '#606266' }" border>
                <el-table-column label="模板ID" width="100" prop="attributesid" align="center"/>
                <el-table-column label="商品属性模板名称" prop="attributesname" align="left"/>
                <el-table-column label="操作" align="center" width="200">
                    <template slot-scope="scope">
                        <el-button type="primary"
                                   size="mini"
                                   @click.native="relationTemplate(scope.row.attributesid,scope.row.attributesname)">关联
                        </el-button>
                        <el-button type="primary"
                                   size="mini"
                                   @click.native="seeTemplate(scope.row)">查看
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                class="pagination-container"
                background
                :page-size="query.pageSize"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                layout="total,sizes,prev, pager, next, jumper"
                :current-page="this.query.currentPage"
                :page-sizes="[5,10, 20, 30, 50]"
                :total="totalNumber"
            ></el-pagination>
            <el-dialog
                :visible.sync="dialogVisible"
                width="50%"
                :before-close="handleClose"
                :close-on-click-modal="false">
                <template slot="title">
                    <div class="avue-crud__dialog__header">
                        <span class="el-dialog__title">
                            <span
                                style="display:inline-block;background-color: #3478f5;width:3px;height:20px;margin-right:5px; float: left;margin-top:2px"></span>模板详情</span>
                    </div>
                </template>
                <el-card>
                    <div class="head">
                        <el-form>
                            <el-form-item>
                                <el-input v-model="submitJson.attributesname" placeholder="请输入属性模板名称" disabled></el-input>
                            </el-form-item>
                        </el-form>
                    </div>
                    <div class="el-title">基本属性</div>
                    <el-form :inline="true" :model="submitJson" class="query-form" size="small">
                        <div v-for="(item, index) in submitJson.templateItemList"
                             :key="index">
                            <el-form-item>
                                <el-input placeholder="请输入属性项名称" v-model="item.fieldname" disabled></el-input>
                            </el-form-item>
                            <el-form-item>
                                <el-select style="width: 115px" v-model="item.fieldtype" disabled>
                                    <el-option :label="'数字'" :value="'数字'"></el-option>
                                    <el-option :label="'文字'" :value="'文字'" ></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item>
                                <el-select style="width: 115px" v-model="item.ismust" disabled>
                                    <el-option :label="'必填'" :value="0"></el-option>
                                    <el-option :label="'非必填'" :value="1"></el-option>
                                </el-select>
                            </el-form-item>
                        </div>
                    </el-form>
                </el-card>
                <el-card>
                    <div class="el-title">扩展属性</div>
                    <el-form
                        :inline="true"
                        :model="submitJson"
                        class="query-form"
                        size="small">
                        <div v-for="(item, index) in submitJson.extendItemList" :key="index">
                            <el-form-item>
                                <el-input placeholder="请输入属性项名称" v-model="item.extendfieldname" disabled></el-input>
                            </el-form-item>
                            <el-form-item>
                                <el-select style="width: 115px" v-model="item.fieldtype" disabled>
                                    <el-option :label="'数字'" :value="'数字'"></el-option>
                                    <el-option :label="'文字'" :value="'文字'"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item>
                                <el-select style="width: 115px" v-model="item.ismust" disabled>
                                    <el-option :label="'必填'" :value="0"></el-option>
                                    <el-option :label="'非必填'" :value="1"></el-option>
                                </el-select>
                            </el-form-item>
                        </div>
                    </el-form>
                </el-card>
                <span slot="footer" class="dialog-footer">
<!--        <el-button @click="handleClose">取 消</el-button>-->
<!--        <el-button type="primary" :loading="loading" @click="submitTemplate">确 定</el-button>-->
      </span>
            </el-dialog>
        </el-card>
    </div>
</template>

<script>
    import {
        addOrUpdateAttributesTemplate,
        queryAttributesTemplateList
    } from "../../api/classification/classification.js";

    const templateFromList = {
        attributesid:'',
        attributesname: "", // 模板名称
        templateItemList: [
            {
                fieldname: "", // 基本属性名称
                fieldtype: null, // 模板类型
                ismust: 0, // 1必填 0非必填
            },
        ],
        extendItemList: [
            {
                extendfieldname:'',// 扩展属性名称
                fieldtype: null, // 模板类型
                ismust: 0, // 1必填 0非必填
            },
        ]
    };
    export default {
        data() {
            return {
                listLoading: false,
                submitJson: templateFromList, // 添加 编辑的数据
                dialogVisible: false, // 判断弹框是否显示
                list: [],
                templateFormData:{},
                arrInfo: {}, // 关联属性信息
                query: {
                    attributesname: "",
                    currentPage: 1,
                    pageSize: 5
                },
                totalNumber: 0,
                loading: false,
            };
        },
        methods: {

            // 关闭弹框
            handleClose() {
                this.dialogVisible = false;
                this.submitJson = templateFromList
            },
            // 搜索查询
            onSearch() {
                this.query.currentPage = 1;
                this.getList()
            },

            handleCurrentChange(val) {
                this.query.currentPage = val;
                //scrollTo(0, 800);
                this.getList();
            },
            handleSizeChange(val) {
                this.query.currentPage = 1;
                this.query.pageSize = val;
                this.getList();
            },
            async getList() {
                this.listLoading = true
                let params = this.query
                let res = await queryAttributesTemplateList(params)
                // console.log(res)
                if (res.code === 0) {
                    this.list = res.data.list
                    this.totalNumber = res.data.totalNumber
                    this.listLoading = false
                } else {
                    this.$message.error(res.message)
                }
            },
            relationTemplate(attributesid,attributesname){
                this.$router.push({
                    name: '关联商品属性模板',
                    path: "/commodity/relationAttributeTemplate", // 关联商家模板页面
                    query: {
                        id:this.$route.query.id,
                        attributesid:attributesid,
                        attributesname:attributesname,
                        from:'toRelation'
                    }
                })
            },
            seeTemplate(row){
                this.submitJson = row
                this.dialogVisible = true
            },
            goback(){
                this.$router.go(-1)
            }
        },
        created() {
            this.getList()
        }
    };
</script>

<style scoped>
    .head {
        display: flex;
        justify-content: flex-start;
    }

    .head p {
        min-width: 70px !important;
        line-height: 40px;
    }

    .el-title {
        font-weight: 600;
        line-height: 20px;
        padding-left: 5px;
    }
</style>
